<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--组件-->

<!--测边栏-->
<nav class="sidebar sidebar-offcanvas" th:fragment="cebian" id="sidebar">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="/admin/toIndex">
                <span class="menu-title">系统首页</span>
                <i class="mdi mdi-home menu-icon"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
                <span class="menu-title">video</span>
                <i class="menu-arrow"></i>
                <i class="mdi mdi-file-video menu-icon"></i>
            </a>
            <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"> <a class="nav-link" href="/admin/toVideoList">video管理</a></li>
                    <li class="nav-item" shiro:hasPermission="admin:addUpdate"> <a class="nav-link" href="/admin/toVideoInsert">添加video</a></li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/admin/toSinger">
                <span class="menu-title">歌手管理</span>
                <i class="mdi mdi-microphone menu-icon"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/admin/toSongList">
                <span class="menu-title">歌单管理</span>
                <i class="mdi mdi-music menu-icon"></i>
            </a>
        </li>


    </ul>

</nav>

<!--顶部-->
<nav th:fragment="top" class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
    <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
        <a class="navbar-brand brand-logo" href="/admin/toIndex"><img th:src="@{/images/logo.svg}" alt="logo"/></a>
        <a class="navbar-brand brand-logo-mini" href="/admin/toIndex"><img th:src="@{/images/logo-mini.svg}" alt="logo"/></a>
    </div>
    <div class="navbar-menu-wrapper d-flex align-items-stretch">
        <div class="search-field ml-4 d-none d-md-block">
            <form class="d-flex align-items-stretch h-100" action="#">
                <div class="input-group">
                    <input type="text" class="form-control bg-transparent border-0" placeholder="Search">
                    <div class="input-group-btn">
                        <button type="button" class="btn bg-transparent dropdown-toggle px-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-earth"></i>
                        </button>

                    </div>
                    <div class="input-group-addon bg-transparent border-0 search-button">
                        <button type="submit" class="btn btn-sm bg-transparent px-0">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <ul class="navbar-nav navbar-nav-right">

            <li class="nav-item nav-logout d-none d-lg-block">
                <a class="nav-link" href="/logout">
                    <i class="mdi mdi-power"></i>
                </a>
            </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
            <span class="mdi mdi-menu"></span>
        </button>
    </div>
</nav>

</body>
</html>